<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/js/jquery-3.4.0.min.js"></script>
		<script src="js/js/echarts.min.js"></script>
	</head>
	<body>
		<div id="main" style="width:600px;height:400px;"></div>
		<script type="text/javascript">
			//基于dom初始化Echarts
			var myEchar=echarts.init(document.getElementById('main'));
			//数据加载之前可显示的内容
			myEchar.showLoading();
			//定义要查询的条件
			myUser={"userid":1}
			$.ajax({
				contentType:"application/json;charset=utf-8",
				type:"put",
				url:"http://localhost:8080/myUser/getEcharts",
				data:JSON.stringify(myUser),
				dataType:"json",
				success:function(res){
					console.log(res);
					if(res){
						myEchar.hideLoading()//关闭动画加载
						myEchar.setOption({
							//根据选择不同的时间段，找出当前时间内访问次数为前10名的IP地址；
							xAxis: {
    							type: 'category',
    							data: ['0:00', '2:30', '5:00', '7:30', '10:00', '12:30', '15:30']
  							},
  							yAxis: {
    							type: 'value',
    							axisLabel: {
							    formatter: '第{value} 名'
							    },
							    axisPointer: {
							      snap: true
							    }
  							},
							title:{
								text:'每天访问量变化图',
								subtext:'访问量'
							},
							tooltip:{
								trigger: 'axis',
							    axisPointer: {
							      type: 'cross'
							    },
							    trigger: 'axis',
							    axisPointer: {
							      type: 'cross'
							    }
							},
							toolbox: {
						    show: true,
						    feature: {
						      saveAsImage: {}
						    }
						    },
							series:[{
								name:'访问次数',
								type:'bar',
								smooth:true,
								data:res,
								emphasis:{
									itemStyle:{
										shadowBlur:10,
										shadowOffsetX:0,
										shadowColor:'rgba(255, 173, 177, 0.4)'}
									}
							}]
						});
					}
				},
			error:function(errorMsg){
			alert("用户状态分析数据加载失败");
			myEchar.hideLoading();}
			});
		</script>
	</body>
</html>
